<template>
	<div>
		<!-- 因为要获得用户输入的手机号进行验证，所有必须用双向绑定 -->
		<input type="text" v-model="cellphone" />
		<!-- 提示框的样式会变化，部分class需要属性绑定-->
		<!-- 提示框的内容会变化，需要{{}}绑定 -->
		<span class="message" :class="isRight ?'success':'fail'">{{isRight ?"手机号可用":"手机号格式错误！"}}</span>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				//因为页面中需要三个变量，所以data中就要有三个变量
				cellphone: "12968290221", //实时接用户在文本框中输入的手机号	
			}
		},
		computed: {
			isRight() {
				//定义正则验证cellphone的内容
				var reg = /^1[3-9]\d{9}$/;
				//如果用正则验证cellphone的内容通过
				return reg.test(this.cellphone);
			},
		},

	}
</script>

<style>
	/* 定义提示框的基础样式 */
	.message {
		display: inline-block;
		width: 160px;
		height: 24px;
		border: 1px solid #555;
		text-align: center;
		line-height: 24px;
	}

	/* 定义提示框在验证通过时的样式 */
	.success {
		border: 1px solid green;
		background-color: lightgreen;
		color: green;
	}

	/* 定义提示框在验证失败时的样式 */
	.fail {
		border: 1px solid red;
		background-color: pink;
		color: red;
	}
</style>